آمار
وب سایت:
.gif){kind=small}
- بازدید : (993)
بعد از اینکه قسمت ستون کناری به اتمام رسید، نوبت به ستون مطالب میرسد. نکته ی بسیار مهمی که در اینجا باید رعایت کنید این است که در قسمت ستون مطالب، هر مطلب باید بین دو برچسب <BLOGFA> و <BLOGFA/> قرار بگیرد در غیر اینصورت مطالب نمایش داده نخواهند شد و در هنگام نصب قالب نیز با پیام خطا مواجه خواهید شد.
قسمت بدنه و ستون مطالب
در قالب استاتیکی که طراحی کرده ایم، کل ستون مطالب دارای کلاس content میباشند:
<div class="content">
…
</div>
و هر مطلب به طور جداگانه دارای کلاسی با عنوان article است یعنی:
<div class="content">
<div class= "article " >
…
</div>
</div>
پس تگ <BLOGFA> باید بعد از کلاس content و قبل از کلاس article قرار بگیرد تا هر مطلبی که ارسال میشود را شامل شود:
<div class="content">
<BLOGFA>
<div class= "article " >
…
</div>
</BLOGFA>
</div>
در ستون کناری، برای هر منو باید کد اصلی را تکرار میکردیم و سپس کدهای مربوط به آن منو را جایگزین می نمودیم. ولی برای ستون مطالب اینکار نیاز نیست و خود تگ <BLOGFA> این کار را انجام خواهد داد. در واقع این برچسب مانند یک حلقه (Loop) عمل خواهد کرد و هر تعداد پست ارسال شده باشد، به همان تعداد کلاس article را تکرار میکند.
در اینجا هم به کدهای html کاری نداریم و تنها نوشته هایی که وجود دارد را با کدهای اختصاصی بلاگفا جایگزین میکنیم.
اگر به کد قالب استاتیک توجه کنید، متوجه میشوید که درون کلاس article سه کلاس اصلی داریم که عبارتند از:
- Post-title
- Post
- Post-meta
و کد زیر را تشکیل داده اند:
<div class="post-title">
<h2>عنوان مطلب یک </h2>
</div>
<div class="line"></div>
<div class="post">
<p>متن مطلب </p>
</div>
<div class="post-meta">
<span class="author-date">نوشته شده توسط ... در تاریخ ...</span>
<span class="comments">آرشیو نظرات </span>
</div>
البته درون کلاس post به جای عبارت “متن مطلب” کدهای دیگری بود که برای مثال ذکر شده بودند و در اینجا آنها را پاک کردیم و با یک نوشته ی ساده جایگزین کردیم تا راحت تر متوجه شوید.
*دقت کنید که کدهای ذکر شده در بالا درون کلاس Article قرار دارند!
همانطور که گفتیم اولین کلاس عبارت است از post-title و کد آن به صورت زیر است:
<div class="post-title">
<h2>عنوان مطلب یک </h2>
</div>
در بلاگفا، کدی که عنوان مطلب را نمایش میدهید <-PostTitle -> است. پس باید کد بالا را به کد زیر تغییر دهیم:
<div class="post-title">
<h2>< -PostTitle - ></h2>
</div>
به این ترتیب عنوان هر پست همان خواهد بود که کاربر در هنگام نگارش مطلب تعیین میکند.
قسمت بعدی که باید ویرایش کنیم درون کلاس post است تا متن مطالب را نمایش دهیم و برای اینکار باید از تگ <-PostContent -> استفاده کنیم.
<div class="post">
<-PostContent->
</div>
ولی محتوای هر مطلب بیشتر از متن اصلی است و شامل بخشهای دیگری از جمله برچسبها و لینک ادامه ی مطلب نیز هست. پس باید در ادامه ی تگ<-PostContent -> تگهای دیگری نیز بکار ببریم:
<div class="post">
<-PostContent->
<BlogExtendedPost><br />
<a href="<-PostLink->">ادامه مطلب </a>
</BlogExtendedPost>
<BlogPostTagsBlock>
<div class="space_20"></div>
برچسبها : <BlogPostTags separator=", ">
<a href="<-TagLink->"><-TagName-></a>
</BlogPostTags>
</BlogPostTagsBlock>
</div>
قسمت <BlogExtendedPost> نمایش دهنده لینک “ادامه ی مطلب” خواهد بود و قسمت <BlogPostTagsBlock> نیز برچسبهایی را که به هر پست نسبت داده شده اند نمایش میدهد.
بخش بعدی که باید با سیستم بلاگفا سازگار شود مربوط به اطلاعات جانبی پست است که شامل نام نویسنده، تاریخ ارسال، تعداد نظرات و … است. در کد اصلی اینچنین داریم:
<div class="post-meta">
<span class="author-date">نوشته شده توسط ... در تاریخ ...</span>
<span class="comments">آرشیو نظرات </span>
</div>
که باید بجای نوشته ها، از کدهای blogfa استفاده کنیم.
نام نویسنده توسط تگ <-PostAuthor -> نمایش داده میشود. با استفاده از برچسبهای <-PostDate -> و <-PostTime -> میتوانید زمان ارسال پست را نمایش دهید. نظرات وبلاگ نیز توسط یک کد اختصاصی به همراه کد جاوااسکریپت نمایش داده میشوند. پس کد اصلی را باید به شکل زیر تغییر دهیم:
<div class="post-meta">
<span class="author-date">نوشته شده توسط <-PostAuthor-> در تاریخ <-PostDate-> <-PostTime-></span>
<span class="comments">
<BlogComment>
<script type="text/javascript">GetBC('<-PostId->');</script>
</BlogComment>
</span>
</div>
فراموش نکنید که بعد از این قطعه کد باید تگ <div/> مربوط به کلاس Article را قرار دهید و تگ بلاگفا را نیز ببندید یعنی <BLOGFA/>. در جلسه آینده قسمت پانوشت یا فوتر را تکمیل خواهیم کرد.
آمار مطالب
آمار کاربران
آمار بازدید
پس به همین دلیل ازتون ممنون میشیم که سوالات غیرمرتبط با این مطلب را در انجمن های سایت مطرح کنید . در بخش نظرات فقط سوالات مرتبط با مطلب پاسخ داده خواهد شد .